import React, {Component} from 'react';
import {Image,TouchableOpacity,StyleSheet} from 'react-native';
import {scaleSize} from '../../utils/screen';
import FontText from './FontText';
import PropTypes from 'prop-types';

export default class MenuItem extends Component {
    render() {
        let {text,icon,iconWidth,iconHeight} = this.props;
        return (
            <TouchableOpacity 
                activeOpacity = {0.8}
                onPress = {()=>this.onPress()}
                style = {styles.box}>
                <Image  style = {[styles.item,{width:scaleSize(iconWidth),height:scaleSize(iconHeight)}]} source = {icon} />
                <FontText style = {styles.text} font={'book'}>{text}</FontText>
            </TouchableOpacity>
        );
    }
    onPress(){
        let {onPress} = this.props;
        onPress && onPress();
    }
}

MenuItem.PropTypes = {
    iconWidth:PropTypes.number.isRequired,
    iconHeight:PropTypes.number.isRequired
}
const styles = StyleSheet.create({
    box:{
        height:scaleSize(160),
        borderRadius: scaleSize(20),
        backgroundColor: "rgba(255,255,255,0.2)",
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: scaleSize(50),
    },
    text:{
        paddingLeft: scaleSize(50),
        color:"#fff",
        fontSize: scaleSize(36),
    }
})